/**
 * @author shaosong
 * @description 颜色编辑
 */
import { Col, message, Row, Tabs, TabsProps } from "antd";
import _ from "lodash";
import React, { useEffect, useState } from "react";
import ColorCard from "../../components/ColorCard";
import { COLORLIST } from "../../utils/util";
import ColorContext from "./ColorContext";
import "./index.less";
import { CopyToClipboard } from "react-copy-to-clipboard";

import CodeBlock from "../../components/CodeBlock";
import { CopyOutlined, SmileTwoTone } from "@ant-design/icons";

export class ColorSettingProps {}

const ColorSetting: React.FC<ColorSettingProps> = (props) => {
  const [colorGlobel, changeColorGlobel] = useState<any>();
  const [isCopy, changeIsCopy] = useState<boolean>(false);
  useEffect(() => {
    let colors: any = {};
    COLORLIST.forEach((color) => {
      colors[color.var] = color.color;
    });
    changeColorGlobel(colors);
  }, [COLORLIST]);

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "编辑",
      children: (
        <Row>
          {Object.keys(colorGlobel || {})?.map((_var, key) => {
            let color: any = COLORLIST.find((item) => item.var === _var);
            return (
              <Col key={String(key)} className="col-style" span={12}>
                <ColorCard
                  title={color.title}
                  color={colorGlobel[_var]}
                  changeColor={(value, hex) => {
                    const _colorGlobel = _.cloneDeep(colorGlobel);
                    _colorGlobel[_var] = hex;
                    changeColorGlobel(_colorGlobel);
                  }}
                />
              </Col>
            );
          })}
        </Row>
      ),
    },
    {
      key: "2",
      label: "Code",
      children: (
        <div style={{ textAlign: "end" }}>
          <CopyToClipboard
            text={JSON.stringify(colorGlobel, null, 2)}
            onCopy={() => {
              message.success("复制成功！");
              changeIsCopy(true);
            }}>
            {isCopy ? <SmileTwoTone twoToneColor="#52c41a" rev={undefined} /> : <CopyOutlined rev={undefined} />}
          </CopyToClipboard>
          <div style={{ textAlign: "start" }}>
            <CodeBlock code={JSON.stringify(colorGlobel, null, 2)} language="JSON" />
          </div>
        </div>
      ),
    },
  ];

  return React.useMemo(
    () => (
      <div className="page-color-setting">
        <Row>
          <Col span={12}>
            <ColorContext colorGlobel={colorGlobel} />
          </Col>
          <Col span={12} style={{ padding: 16 }}>
            <Tabs items={items} />
          </Col>
        </Row>
      </div>
    ),
    [colorGlobel],
  );
};

ColorSetting.defaultProps = new ColorSettingProps();
export default ColorSetting;
